<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备配置详情 - 前端展示</title>
    <!-- 引入外部资源 -->
    <link rel="stylesheet" th:href="@{/static/admin/css/device-style.css}"/>
</head>
<body>
<!-- 页面标题 -->
<h1 class="page-title">设备配置详情</h1>

<!-- 引入页脚 -->
<th:block th:include="include :: footer"></th:block>

<!-- 整体布局容器 -->
<div class="device-container">
    <!-- 左侧图片区域 -->
    <div class="device-image">
        <img th:src="@{/static/images/index.png}" alt="设备图片">
    </div>

    <!-- 右侧配置信息区域 -->
    <div class="device-info">
        <h2>连接参数</h2>
        <ul class="info-list">
            <li>
                <span class="label">串口:</span>
                <span>COM1</span>
            </li>
            <li>
                <span class="label">波特率:</span>
                <span>9600</span>
            </li>
            <li>
                <span class="label">检验位:</span>
                <span>None</span>
            </li>
            <li>
                <span class="label">数据位:</span>
                <span>8</span>
            </li>
            <li>
                <span class="label">停止位:</span>
                <span>1</span>
            </li>
            <li>
                <span class="label">帧超时:</span>
                <span>1000ms</span>
            </li>
        </ul>

        <!-- 连接状态 -->
        <div class="status-section">
            <span class="label">连接状态:</span>
            <div class="status-indicator connected" id="deviceStatus">
                <span class="tooltip">已连接</span>
            </div>
        </div>
    </div>
</div>

<!-- 引入脚本 -->
<script th:src="@{/static/admin/js/device-script.js}"></script>
</body>
</html>
